Review: Apply visual design principles to project mockups 複習:把視覺設計原則用到專案 Mockup

四個關鍵視覺設計原則回顧

1 強調(Emphasis)

目的:突出使用者最需要注意的元素,增強視覺權重。示例:將“你可能喜歡的披薩”區域放進一個帶陰影的框中,並新增圖片,幫助使用者理解資訊歸屬並引導點選。

2 層級結構(Hierarchy)

目的:引導使用者的視覺流向,優先處理重要資訊。

示例:將“等待時間”和“佇列中披薩數量”用更大字型展示,同時調整佈局順序以更易識別。

3 比例與尺度(Scale & Proportion)

目的:幫助使用者理解元素之間的相似與差異,提高可讀性。

示例:之前設計中的紅色按鈕過大、文字太小,比例不協調。最佳化後,將字型放大使其與按鈕形成視覺平衡。

4 一致與多樣(Unity & Variety)

目的:提升整體設計的連貫性,同時用變化打破單調。

示例:保留了原先色彩多樣性帶來的資訊引導效果,並使用一致的色彩系統確保整體統一。

應用建議:改進你的作品集 mockups

你可以這樣操作:

自檢清單:我的設計是否...?

檢查點對應原則
有明顯的主視覺?最關鍵的資訊是否突出?Emphasis
使用者是否能第一時間看到重要資訊?視覺流程是否自然?Hierarchy
元素大小是否協調?文字是否清晰易讀?Scale & Proportion
整體風格是否統一?是否也有適當的變化來吸引眼球?Unity & Variety

靈感參考建議: